<template>
    <div class="flex mt-4">
        <div>
            <img :src="product.img" class="w-20 h-20 rounded-lg" />
        </div>

        <div class="flex flex-1 flex-col ml-2 text-xs">
            <p class="text-ellipsis line-clamp-2">{{ product.name }}</p>
            <p class="text-xs text-gray-400">{{ product.description }}</p>
        </div>

        <div class="flex flex-col ml-4">
            <p>¥{{ product.price }}</p>
            <p class="text-gray-400">x{{ product.count }}</p>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Iproduct } from '@/config/interface'

// 1.组件入参
const props = defineProps<{
    productInfo: Iproduct
}>()

const product = ref(props.productInfo)
</script>
